<!--
 * @Description: 首页
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 何梦龙
 * @LastEditTime: 2022-05-15 10:05:47
-->
<template>
<div>
  <!--基本渲染{{msg}}-->
<!-- {{carouselData}}  -->
<!-- {{categoryData}}  -->
<!-- {{productData}} -->
 <div class="header">易洁家政</div>
 <div class="swipe-div">
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in carouselData" :key="item.id">
    <img
     :src="item.url" 
     alt=""
     />
  </van-swipe-item>
  </van-swipe>
 </div>

 <!-- {{categoryData}} -->
<div class="category-div">
  <van-grid :column-num="5" :gutter="10" :border="false">
  <van-grid-item 
    @click="$router.push({path:'product',query:{id:item.id},})"
    v-for="item in categoryData" 
    :key="item.id" 
    :icon="item.icon" 
    :text="item.name" 
  />
</van-grid>
</div>


<!-- 产品数据 -->
<div class="product-div">
  <van-row gutter="20">
  <van-col span="12" v-for="item in productData" :key="item.id">
  <div class="my-col">
    <img :src="item.photo" alt=""/>
    <div class="title">{{item.name}}</div>
    <div class="desc">{{item.description}}</div>
  </div>
  
  </van-col>
</van-row>
</div>

  <div>首页
    <button @click="$router.push('product')">跳转到服务产品页面</button>
  </div>
  <!-- br代表空行 -->
  <br />
  <br />
  <br />
  <br />
  <br />
  </div>
</template>


<script>
import {queryCarousel,pageQueryProductCategory,pageQueryProduct} from "@/api/index.js";
export default {
  data() {
    return {
      //数据存储地方

      //轮播图数据
      carouselData:[],

      //产品分类数据
      categoryData:[],

      //产品数据
      productData:[],
    };
  },
  computed: {},

  //方法
  methods: {
    //加载轮播图数据
    async loadCarousel(){
      let res=await queryCarousel();
      this.carouselData=res.data.data;
      //console.log(res.data.data);
    },//加载轮播图的数据-->>处理数据显示到页面上

    //加载产品分类数据
    async loadCategory(){
       let res=await pageQueryProductCategory({page:1,pageSize:5})
       this.categoryData=res.data.data.list;
       //console.log(res);
    },

    //加载产品数据
    async loadProduct(){
       let res=await pageQueryProduct({page:1,pageSize:8})
       this.productData=res.data.data.list;
       //console.log(res);
    },
    


    
  },
  
  //vue页面生命周期钩子函数，页面显示前,请求后台数据
  created() {
    this.loadCarousel();
    this.loadCategory();
    this.loadProduct();
    
  },
  
  mounted() {}
};
</script>


<style scoped>
.header{
  height: 135px;
  /*background-color: red;*/
  background-image: linear-gradient(to right,#7579ff,#bf73ff);
  /*设置圆角边框*/
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  color: white;
  font-size: 28px;
  /*文字对齐方式 */
  text-align: center;
  line-height: 56px;
  /*文字粗细*/
  font-weight: 900;
}

.swipe-div{
   width: 90%;
   margin: 0 auto;
   /*元素位置往上提50*/
   margin-top:-80px;
   /*四个方向的圆角边框*/
   /* border-radius: 10px; */
}


.my-swipe img{
   height: 150px;
   width: 100%;
   border-radius: 10px;
}

.product-div{
  /* border: 1px solid red;边框 */
  padding: 20px;
}

.my-col{
  /* border: 1px solid #ddd; */
  box-shadow: 0 0 3px #ddd;
  margin: 10px 0;
  padding: 15px;
  border-radius: 5px;
}

.product-div img{
  width: 100%;
  height: 80px;
  /* margin: 0 auto; */
  /* display: block; */
}

.title{
  font-size: 20px;
  text-align: center;
}

.desc{
  font-size: 14px;
  text-align: center;
  color: #777;
}

</style>
